<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-ua-compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title></title>
		<style>
			body,ul{margin:0;padding:0;}
			ul{list-style:none;}
			.container{
				margin:50px auto;
				width:1000px;
				height:600px;
			/* 	background-color: pink; */
			}
			.container .nav{
				width:1000px;
				height:50px;
				/* background-color: red; */
			}
			.container .nav ul li{
				display:inline-block;
				float:right;
				margin:10px 10px;
				width:50px;
				height:30px;
				border-left:1px solid #ccc;
		/* 		background-color: blue; */
				line-height:30px;
				text-align:center;
				font-size:12px;
			}
			.container .nav ul .special{
				border-left-color:transparent;
			}
			/* .container .content{
				height:550px;
				background-color:green;
			} */
			.container .content .tp1{
				float:left;
				width:320px;
				height:550px;
			/* 	background-color: yellow; */
			}
			
			 .container .content .tp2{
				float:left;
				font-size:0;
				width:170px;
				height:550px;
			/* 	background-color: hotpink; */
			}
			.container .content .tp3{
				float:left;
				font-size:0;
				width:170px;
				height:550px;
		/* 		background-color: green; */
			}
				.container .content .tp4{
				float:left;
				font-size:0;
				width:340px;
				height:550px;
				background-color: blue;
			}
			.container .content .tp4-a,.tp4-b{
				float:left;
			}
		</style>
	</head>
	<body>
		<div class='container'>
			<div class='nav'>
				<ul>
					<li>换肤</li>
					<li>彩妆</li>
					<li>美发</li>
					<li>美体</li>
					<li>香氛</li>
					<li>肌肤</li>
					<li>产品</li>
					<li>唇部</li>
					<li>精华</li>
					<li class='special'>修护</li>
				</ul>
			</div>
			<div class='content'>
				<div class='tp1'>
					<img width='320' height='550' src="1.jpg" alt="">
				</div>
				<div class='tp2'>
					<div>
						<img width='170' height='275' src="2.jpg" alt="">
					</div>
					<div>
						<img width='170' height='275' src="3.jpg" alt="">
					</div>
				</div>
				<div class='tp3'>
					<div>
						<img width='170' height='183.3' src="4.jpg" alt="">
					</div>
					<div>
						<img width='170' height='183.3' src="5.jpg" alt="">
					</div>
					<div>
						<img width='170' height='183.3' src="6.jpg" alt="">
					</div>
				</div>
				<div class='tp4'>
					<div class="tp4-a">
						<img width='170' height='183.3' src="7.jpg" alt="">
					</div>
					<div class="tp4-b">
						<img width='170' height='183.3' src="8.jpg" alt="">
					</div>
					<div class="tp4-c">
						<img width='340' height='366.7' src="9.jpg" alt="">
					</div>
				</div>
				
			</div>
		</div>
	</body>
</html>
